<template>
  <view class='container'>
  <view class='main'> 
    <view class="empty" v-if="addressList.length==0">
      <view class="img">
        <image src='http://jiales.gz-yami.com/addr.png'></image>
      </view>
      <view class='txt'>您还没有收货地址</view>
    </view>
    <radio-group class="radio-group">
      <block  v-for="(item ,index ) in addressList"  :key="index">
        <view class='address' >
          <view class='personal' @click="toEdit(item.addrId)">
            <view class='info-tit'>
              <text class='name'>{{item.receiver}}</text>
              <text class='tel'>{{item.mobile}}</text>
              <image src='../../static/images/icon/revise.png' @click='toEdit' :data-addrid="item.addrId"></image>
            </view>
            <view class='addr'>
              <text class='addr-get'> {{item.province}}{{item.city}}{{item.area}}{{item.addr}}</text>
            </view>
          </view>
          <view class='select-btn'>
            <view class="box">
              <label  bindtap='onDefaultAddr' data-addrid="item.addrId">
                <radio :value="item.prodId" :checked="item.commonAddr==1" color="#eb2444" />设为默认地址</label>
            </view>
          </view>
        </view>
      </block>
    </radio-group>
  </view> 
  <view class='footer' @click="toAddress">
    <text>新增收货地址</text>
  </view>
</view>
</template>

<script>
import { mapState, mapActions } from "vuex";
export default {
    onShow() {
        this.getAddress()
    },
    computed: {
    ...mapState({
      addressList: (state) => state.address.addressList,
    }),
  },
  mounted(){
      console.log(this.addressList,'----------------');
  },
  methods: {
    ...mapActions({
      getAddress: "address/getAddress",
    }),
    toEdit(id){
      console.log(id);
      uni.navigateTo({
        url:`/pages/edits/index?id=${id}`
      })
    },
    toAddress(){
      uni.navigateTo({
        url:'/pages/new-address/index'
      })
    }
  },
}
</script>

<style>


.main {
  margin-top: 20rpx;
}

.address {
  margin-bottom: 15rpx;
  width: 100%;
  background-color: #fff;
  border-bottom: 2rpx solid #e9eaec;
}

.address .personal {
  position: relative;
  padding: 20rpx 30rpx;
  border-bottom: 3rpx dashed #e9eaec;
}

.address .personal .info-tit .name {
  margin-right: 30rpx;
  font-size: 32rpx;
  display: inline-block;
}

.address .personal .info-tit .tel {
  font-size: 30rpx;
}

.address .personal .info-tit image {
  position: absolute;
  right: 30rpx;
  top: 46rpx;
  width: 40rpx;
  height: 40rpx;
  margin-left: 50rpx;
  vertical-align: middle;
}

.personal .addr {
  font-size: 26rpx;
  margin: 10rpx 0;
}

.personal .addr .addr-get {
  display: inline-block;
  color: #999;
  width: 100%;
  word-break: break-word;
}

.address .select-btn {
  padding: 15rpx 30rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.address .select-btn .box {
  font-size: 26rpx;
}

.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
  background-color: #fff;
  box-shadow: 0 -1rpx 8rpx rgba(0, 0, 0, 0.05);
}

.footer text {
  font-size: 32rpx;
  color: #eb2444;
}

.empty .img {
  text-align: center;
  margin-top: 130rpx;
}

.empty .img image {
  width: 100rpx;
  height: 100rpx;
  display: block;
  margin: auto;
}

.empty .txt {
  margin-top: 30rpx;
  font-size: 24rpx;
  text-align: center;
  color: #999;
}

</style>